<template>
  <div class="loanProducts">
    <div class="loanProducts-search">
      <div class="loanProducts-search-item template-name">
        <label class="template-name-lable">模板名称</label>
        <el-input v-model="templateName"
                  placeholder="请输入模板名称" class="innerinput"></el-input>
      </div>
      <div class="loanProducts-search-item template-number">
        <label class="template-name-lable">模板编号</label>
        <el-input v-model="templateNumber"
                  placeholder="请输入模板编号" class="innerinput"></el-input>
      </div>
      <div class="loanProducts-search-item template-type">
        <label class="template-name-lable">适用范围</label>
        <el-select v-model="selectVal2"
                   placeholder="请选择" class="innerinput">
          <el-option v-for="item in contarlist"
                     :key="item.id"
                     :label="item.value"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="loanProducts-search-item template-type">
        <label class="template-name-lable">模板状态</label>
        <el-select v-model="value"
                   placeholder="请选择" class="innerinput">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="loanProducts-search-item">
        <el-button type="primary" @click="handleQueryList">
          查询
        </el-button>
        <el-button class="rest-btn" @click="handleResetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="loanProacducts-ations">
      <el-button type="primary"
                 @click="addTemplate">
        <i class="el-icon-circle-plus-outline"></i>
        添加
      </el-button>
      <el-button type="danger" @click="removeList">
        <i class="el-icon-circle-close"></i>
        删除
      </el-button>
    </div>
    <div class="loanProducts-main">
      <div class="loanProducts-list">
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="50">
          </el-table-column>
          <el-table-column prop="name"
                           label="模板名称"
                           >
          </el-table-column>
          <el-table-column prop="number"
                           label="模板编号"
                           >
          </el-table-column>
          <el-table-column prop="type"
                           label="合同类型"
                           >
          </el-table-column>
          <el-table-column prop="range"
                           label="适用范围"
                           >
          </el-table-column>
          <el-table-column prop="date"
                           label="模板有效期"
                           width="200"
                           >
          </el-table-column>
          <el-table-column prop="state"
                           label="模板状态"
                           >
          </el-table-column>
          <el-table-column cell-class-name="actions"
                           label="操作"
                           width="300"
                           >
            <template slot-scope="scope">
              <div class="list-actions-list">
                <a class="list-actions"
                  @click="handleEdit(scope.row)">编辑</a>
                <!-- <a class="list-actions" @click="handleChecked(scope.row)">查看详情</a> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background
        layout="prev, pager, next" :total="total" @current-change="handleChangePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { queryTemplateList, removeTemplateList, getscopedataapi } from '@/api/contractTemplate.js'
export default {
  data () {
    return {
      tableData: [], // 列表数据
      multipleSelection: [],
      options: [{
        valve: '',
        label: ''
      },
      {
        value: '1',
        label: '启用'
      },
      {
        value: '2',
        label: '禁用'
      },
      {
        value: '3',
        label: '已到期'
      }],
      contarlist: [{
        value: '',
        label: ''
      }
      ],
      selectVal2: '', // 搜索适用范围
      value: '', // 搜索模板状态
      templateName: '', // 搜索模板名称
      templateNumber: '', // 搜索模板标号
      total: 0, // table总条数
      pageSize: 10, // 页容量
      currentPage: 1, // 当前页
      base: ''
    }
  },
  methods: {
    addTemplate () {
      // 跳转新增页面
      this.$router.push({name: 'templateAdd'})
    },
    handleEdit (val) {
      // 编辑模板
      // 缓存该条数据
      window.localStorage.setItem('templateDate', JSON.stringify(val.oldData))
      this.$router.push({
        name: 'templateEdit',
        params: {
          id: val.id
        }
      })
    },
    handleChecked (val) {
      // 查看模板详情
      // 缓存该条数据
      window.localStorage.setItem('templateDate', JSON.stringify(val.oldData))
      this.$router.push('/LookTemplate')
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleChangePage (val) {
      // 分页器翻页
      if (this.templateNumber !== '' || this.templateName !== '' || this.selectVal2 !== '' || this.value !== '') {
        const postData = {
          userSeq: '1',
          cifSeq: '1',
          transId: '06234017',
          accessHost: '11',
          templateNo: this.templateNumber.trim(),
          templateName: this.templateName.trim(),
          scopeId: parseInt(this.selectVal2),
          enable: parseInt(this.value),
          currentPage: val,
          pageSize: 10
        }
        this.getTemplateList(postData)
      } else {
        const postData = {
          userSeq: '1',
          cifSeq: '1',
          transId: '06234017',
          accessHost: '11',
          currentPage: val,
          pageSize: 10
        }
        this.getTemplateList(postData)
      }
    },
    getTemplateList (val) {
      // 获取列表数据
      queryTemplateList(JSON.stringify(val)).then(res => {
        this.tableData = res.data.data.list.map((item) => {
          let type = ''
          let state = ''
          const date = item.startDate + ' 至 ' + item.endDate
          if (item.typeId === 2) {
            type = '适用个人类客户'
          } else if (item.typeId === 3) {
            type = '适用公司类客户'
          } else if (item.typeId === 1) {
            type = '通用类'
          }
          if (item.enable === 1) {
            state = '启用'
          } else if (item.enable === 2) {
            state = '禁用'
          } else if (item.enable === 3) {
            state = '已过期'
          }
          return {
            id: item.id,
            date: date, // 有效期
            name: item.templateName, // 模板名字
            number: item.templateNo, // 模板编号
            range: item.value, // 适用范围
            type: type, // 模板类型
            state: state, // 模板状态
            oldData: item // 获取的当前列表数据
          }
        })
        this.total = res.data.data.totalCount
        this.pageSize = res.data.data.pageSize
      })
    },
    removeList () {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择删除项'
        })
      } else {
        // 删除模板数据
        if (this.multipleSelection.length > 1) {
          this.$message({
            message: '暂不支持批量删除',
            type: 'warning'
          })
        } else {
          const postData = {
            userSeq: '1',
            cifSeq: '1',
            transId: '06234015',
            accessHost: '11',
            id: this.multipleSelection[0].oldData.id
          }
          this.$confirm('此操作将永久删除该文件', '提示', {
            confirmButtonText: '确定',
            cancelbuttonText: '取消',
            type: 'warning'
          }).then(() => {
            removeTemplateList(JSON.stringify(postData)).then(res => {
              if (res.data.message === 'success') {
                const data = {
                  userSeq: '1',
                  cifSeq: '1',
                  transId: '06234017',
                  accessHost: '11',
                  currentPage: 1,
                  pageSize: 10
                }
                this.getTemplateList(data)
                this.$message({
                  message: '删除成功！',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '删除失败！',
                  type: 'error'
                })
              }
            })
          }).catch(() => {
            this.$message({
              message: '已取消删除！',
              type: 'info'
            })
          })
        }
      }
    },
    handleQueryList () {
      // 条件查询
      const postData = {
        userSeq: '1',
        cifSeq: '1',
        transId: '06234017',
        accessHost: '11',
        templateNo: this.templateNumber.trim(),
        templateName: this.templateName.trim(),
        scopeId: parseInt(this.selectVal2),
        enable: parseInt(this.value),
        currentPage: 1,
        pageSize: 10
      }
      this.getTemplateList(postData)
    },
    handleResetList () {
      // 重置模板数据
      this.templateNumber = ''
      this.templateName = ''
      this.selectVal2 = ''
      this.value = ''
      const postData = {
        userSeq: '1',
        cifSeq: '1',
        transId: '06234017',
        accessHost: '11',
        currentPage: 1,
        pageSize: 10
      }
      this.getTemplateList(postData)
    },
    getselectcont () {
      getscopedataapi({
        cifSeq: '1',
        transId: '06234019',
        accessHost: '11'
      }).then(res => {
        if (res.data.code === '000000') {
          res.data.data.list.forEach(item => {
            this.contarlist.push(item)
          })
        }
      })
    }
  },
  created () {
    const postData = {
      userSeq: '1',
      cifSeq: '1',
      transId: '06234017',
      accessHost: '11',
      currentPage: 1,
      pageSize: 10
    }
    // 页面进入后获取模板列表
    this.getTemplateList(postData)
    this.getselectcont()
  }
}
</script>

<style scoped>
.template-name-lable{
  font-size: 16px;
}
.innerinput /deep/ input{
  width: 0px !important;
  min-width: 140px !important;
  margin-right: 5px;
}

.loanProducts-search-item[data-v-5fddf590] /deep/.el-button{
    width: auto;
    padding: 0 20px;
}
.loanProducts {
  width: 100%;
  height: 100%;
  position: relative;
}
.loanProducts-title {
  height: 48px;
  margin: 0 0px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 4px;
  padding-left: 16px;
  box-sizing: border-box;
}
.loanProducts-title h3 i {
  width: 4px;
  height: 16px;
  background: #5290ff;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.loanProducts-title h3 {
  padding-left: 3px;
  font-size: 18px;
  line-height: 48px;
  font-weight: bold;
}
.loanProducts-search {
  height: 64px;
  border-radius: 4px;
  margin: 0 0px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 30px;
}
.loanProducts-search-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.template-name-lable {
  white-space: nowrap;
  margin-right: 10px;
}
.template-name >>> .el-input__inner {
  width: 146px;
  height: 40px;
}
.template-number >>> .el-input__inner {
  width: 180px;
}
.template-type >>> .el-input__inner {
  width: 180px;
}
.loanProducts-search-item >>> .el-button {
  width: 118px;
  height: 40px;
  padding: 0;
  font-size: 16px;
}
.rest-btn {
  background: rgb(242, 188, 31);
  color: #fff;
}
.rest-btn:hover {
  border-color: rgba(242, 188, 31, .6);
  color: #fff;
  background: rgba(242, 188, 31, .6);
}
.loanProacducts-ations {
  margin: 10px 0px;
  background: #fff;
  border-radius: 4px;
  height: 68px;
  display: flex;
  padding-left: 22px;
  box-sizing: border-box;
  align-items: center;
}
.loanProacducts-ations >>> .el-button {
  margin: 0 8px;
  width: 92px;
  height: 36px;
  font-size: 12px;
  padding: 0;
  line-height: 36px;
}
.loanProacducts-ations >>> .el-button span {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-items: center;
}
.loanProacducts-ations >>> .el-button i {
  font-size: 26px;
  margin-left: 14px;
  margin-right: 10px;
}
.loanProducts-main {
  margin: 0 0px;
}
.loanProducts-main >>> .el-table-column--selection .cell {
  text-align: center;
}
.loanProducts-main >>> .el-table thead {
  color: #101010;
  height: 68px;
  font-size: 14px;
}
.list-actions {
  display: inline-block;
  padding: 0 15px;
  line-height: 14px;
  color: #207ffd;
  cursor: pointer;
}
.is-border {
  border-right: 1px solid #d9d9d9;
}
.loanProducts-main >>> .el-pagination.is-background .el-pager li {
  background: #fff;
}
.loanProducts-main >>> .el-pagination.is-background .el-pager .active {
  background: #409eff;
}
.loanProducts-main >>> .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.loanProducts-main >>> .el-pagination .btn-prev,
.btn-next {
  background: #fff;
}
.loanProducts-main >>> .el-table__row{
  height: 68px
}
.loanProducts-main >>> .el-table tr{
  height: 68px;
}
.list-actions-list{
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  align-content: center;
}
</style>
